import React from 'react';
import { ScrollView,View, Text, FlatList,TouchableOpacity, Platform,StyleSheet } from 'react-native';
import moment from 'moment'
import navigationhelper from 'src/components/navigationhelper'
import {CalendarList, LocaleConfig} from 'react-native-calendars';
import NavBar from 'src/components/navBar'
import Layer from 'src/components/Layer'
import {isIPhoneX} from 'src/util'
import ScrollableTabView from 'react-native-scrollable-tab-view'
import { deviceWidth } from '../../../util';
import  userHome from '../../../service/Home/index'
import {inject, observer} from "mobx-react/native"

@inject('userAuth')

@observer
export default class repaymentRecordDetail extends React.Component {

    constructor(props) {
      super(props);

      this.state = {
        dataDict:{}
      }
    }
   
    componentDidMount=()=>{
      const detailId = this.props.navigation.getParam('repayId')
      this.getDetailDatas(detailId)
    }

    getDetailDatas=(detailId)=>{
      Layer.showLoading()
      userHome.fetchPlanDatadetail(detailId,{token:this.props.userAuth.token}).then((res)=>{
        Layer.hiddenLoading()
        if(res.status == 'success'){
          this.setState({
            dataDict:res.data
          })
        }
      }).catch((res)=>{
        Layer.hiddenLoading()
        Layer.showMsg(res.message)
      })

    }
    cellView=(title,content)=>{
      return(
        <View style={{flexDirection:'row',marginTop:15}}>
      <Text style={{color:'#8E8E93',fontSize:14,marginLeft:20}}>{title}
      </Text>
      <Text style={{color:'#2E2E2E',fontSize:14,marginLeft:20}}>{content}
      </Text>
        </View>
      )

    }

    FourView =(dataArray)=>{
      return(
        <View style={[styles.viewStyle,{marginTop: 20,paddingTop:15,paddingBottom:15,justifyContent:'flex-start'}]}>
            <Text style={{color:'#2E2E2E',fontWeight:'bold',fontSize:15,marginLeft:20}}>
          计划详情
          </Text>
        <FlatList
         data={dataArray}
         keyExtractor={(item, index) =>index}
         renderItem={({item}) =>
         {
            console.log(item)
            let typeText = '';
            if(item.type === 1){
              //消费
              typeText = '消费';
            }else if(item.type === 2){
              //还款
              typeText = '还款';
            }

            let statusText = <Text style={{color:'#c5c5c5'}}>{typeText}未执行</Text>;
            
           if(item.status === 1){
            statusText = <Text style={{color:'#76D358'}}>{typeText}执行中</Text>;
           } else if(item.status === 2){
            statusText = <Text style={{color:'#378EFB'}}>{typeText}已完成</Text>;
           } else if(item.status === 3){
            statusText = <Text style={{color:'#f00'}}>{typeText}执行失败</Text>;
           }
           
           return(
             <View style={{marginTop:20}}>
               <Text style={{color:'#2E2E2E',fontSize:15,marginLeft:20}}>
                  {statusText}
                </Text>
                <View style={{flexDirection:'row',justifyContent:'space-between',marginTop:10}}>
                  <View style={{flexDirection:'column'}}>
                    <Text style={{color:'#8E8E93',fontSize:13,marginLeft:20,marginTop:5}}>
                      {typeText}时间
                    </Text>
                    <Text style={{color:'#2E2E2E',fontSize:14,marginLeft:20,marginTop:5}}>
                        {item.run_time}
                    </Text>
                  </View>
                  <View style={{flexDirection:'column',marginRight:10}}>
                    <Text style={{color:'#8E8E93',fontSize:13,marginLeft:20}}>
                      {typeText}金额
                    </Text>
                    <Text style={{color:'#2E2E2E',fontSize:14,marginLeft:20,marginTop:5}}>
                      {item.amount}
                    </Text>
                  </View>
                </View>
              </View>
            )
         }
         }/>
    
    </View>
      )
     
    }

    ThirdView=(dict)=>{
      return(
        <View style={[styles.viewStyle,{marginTop: 20,paddingTop:15,paddingBottom:15,justifyContent:'flex-start'}]}>
          <Text style={{color:'#2E2E2E',fontWeight:'bold',fontSize:15,marginLeft:20}}>
         还款明细
          </Text>
          {this.cellView('已消费金额',dict.already_consume_amount)}
          {/* {this.cellView('已还款次数',dict.)} */}
          {this.cellView('已还款金额',dict.already_repayment_amount)}
          {this.cellView('已扣手续费',dict.already_produce_charge)}
          {/* {this.cellView('已扣次数费','24200')} */}
         </View>
      )

    }

    SecondView=(dict)=>{
      let start = '';
      let end = '';
      // if(dict !== undefined){
      //   start = dict.date_list[0] ? dict.date_list[0]:'';
      //   end = dict.date_list[dict.date_list.length - 1] ? dict.date_list[dict.date_list.length - 1]:'';
      // }

      return(
        <View style={[styles.viewStyle,{marginTop: 20,paddingTop:15,paddingBottom:15,justifyContent:'flex-start'}]}>
          <Text style={{color:'#2E2E2E',fontWeight:'bold',fontSize:15,marginLeft:20}}>
          计划明细
          </Text>
          {this.cellView('还款次数',dict.daily_repayment_times * dict.days)}
          {this.cellView('还款金额',dict.amount)}
          {this.cellView('每日次数',dict.daily_repayment_times)}
          {/* {this.cellView('开始时间',start)} */}
          {/* {this.cellView('结束时间',end)} */}
         </View>
      )

    }


    FirstView =(dict)=>{
      let fee = (parseInt(dict.consume_fee * 100) + parseInt(dict.repayment_fee * 100))/100
      let statusText = '';
      if(dict.status === 1){
        statusText = <Text style={{color:'#378EFB',fontSize:15,fontWeight:'bold',marginTop:10}}>已制定</Text>
      } else if(dict.status == 2){
        statusText = <Text style={{color:'#378EFB',fontSize:15,fontWeight:'bold',marginTop:10}}>执行中</Text>
      } else if(dict.status == 3){
        statusText = <Text style={{color:'#378EFB',fontSize:15,fontWeight:'bold',marginTop:10}}>已完成</Text>
      } else if(dict.status == 4){
        statusText = <Text style={{color:'#378EFB',fontSize:15,fontWeight:'bold',marginTop:10}}>已取消</Text>
      } else if(dict.status == 5){
        statusText = <Text style={{color:'#378EFB',fontSize:15,fontWeight:'bold',marginTop:10}}>已失败</Text>
      }else{
        statusText = <Text></Text>
      }
      return(
        <View style={[styles.viewStyle,{marginTop: 20,paddingTop:15,paddingBottom:15,justifyContent:'center',alignItems:'center'}]}>
        <Text>订单号:{dict.plan_no}</Text>
        <View style={{marginTop:10,backgroundColor:'#E6E3E6',height:1,width:deviceWidth-60,marginLeft:20,marginRight:20}}/>
        <View style={{flexDirection:'row',justifyContent:'space-around',marginTop:10}}>
        <View style={{flexDirection:'column',justifyContent:'center',alignItems:'center'}}> 
        <Text style={{fontSize:12}}>计划状态</Text>
        {statusText}
        </View>
        <View style={{backgroundColor:'#E6E3E6',height:50,width:1,marginLeft:40,marginRight:40}}/>
        <View style={{flexDirection:'column',justifyContent:'center',alignItems:'center'}}> 
        <Text style={{fontSize:12}}>还款总手续费</Text>
        <Text style={{color:'#378EFB',fontSize:15,fontWeight:'bold',marginTop:10}}>{'¥'+ fee}</Text>
        </View>
        </View>
        </View>
      )
    }


    render(){
      return(
        <View style={{flex: 1}}>
        <NavBar 
          back={()=>{navigationhelper.goBack() }} 
          title={'计划详情'} 
          leftText={'返回'} 
          // rightButton={<TouchableOpacity
          //   style={{justifyContent:'center', paddingRight: 15, alignItems: 'center', paddingTop: Platform.OS === 'ios' ? (isIPhoneX() ? 30: 10) : 0}}
          //   onPress={this.onConfirmSelectedDay}
          // >
          //   <Text style={{fontSize: 16, color: '#378EFB', fontFamily: 'PingFang SC'}}>
          //     {'确定'}
          //   </Text>
          // </TouchableOpacity>}
        />
        <ScrollView>
        {this.FirstView(this.state.dataDict)}
        {this.SecondView(this.state.dataDict)}
        {this.ThirdView(this.state.dataDict)}
        {this.FourView(this.state.dataDict.detail)}
        </ScrollView>
     </View>
      ) 
    }

}

const styles = StyleSheet.create({
       viewStyle:{
         borderRadius:10,
         backgroundColor:'#fff',
         marginLeft:10,
         marginRight:10,
       }

})